<template>
    <el-dialog title="查看装箱理货" :visible.sync="dialogForm" width="1100px">
        <el-dialog width="600px" title="提示" :visible.sync="innerVisible" append-to-body>
            <el-form :inline="true"  class="search-form" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="结算方式：">
                            {{accountWay == "M" ? "月结" : "现结"}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="结算单位：">
                            {{accountUnit}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="'C'==accountWay">
                    <el-col :span="8">
                        <el-form-item label="付费金额：">
                            {{Number(accountFee).toFixed(2)}}元
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-left: 18px;">
                    <el-col :span="8">
                       是否确认审核?
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reSure">确认</el-button>
                <el-button @click="innerVisible = false">关 闭</el-button>
            </div>
        </el-dialog>
        <el-form :inline="true" :model="form" ref="form" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerId">
                        {{ form.containerId }}
                        <!--<auto-search-container v-model="form.containerId"></auto-search-container>-->
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型：" prop="containerType">
                        {{ form.containerType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        {{ form.containerSize }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代：" prop="shipAgentName">
                        {{ form.shipAgentName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="铅封号：">
                        {{ form.sealNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸：" prop="tradeType">
                        {{ form.tradeType | _filterTradeType }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="装箱方式：">
                        港装
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="装箱总件数：">
                        {{ form.cargoCount }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="装箱总货重：">
                        {{ form.cargoWeight }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="装箱完成：">
                        {{ isFinish | _filterIsFinish }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业港口：">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
                <!--<el-col :span="8">-->
                    <!--<el-form-item label="进出口：">-->
                        <!--{{ form.imOrEx | _filterImportExport }}-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="完成人：">
                       {{form.tallyClerk}}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="完成时间：">
                        {{form.finishTime}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="核对人：">
                        {{form.checkUser}}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="核对时间：">
                        {{form.checkTime}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注：" prop="remark">
                        {{ form.remark }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="装箱照片：">
                        <attachments :isPreview="true" v-model="form.attachments" listType="picture-card"></attachments>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-table :data="table" border stripe max-height="500" class="mt-10">
                <el-table-column type="index" fixed="left" label="序号" width="55" ></el-table-column>
                <el-table-column prop="cargoName" label="货名"  min-width="120"></el-table-column>
                <el-table-column prop="packing" label="包装"  min-width="120"></el-table-column>
                <el-table-column prop="cargoCount" label="装箱件数"  min-width="120"></el-table-column>
                <el-table-column prop="cargoWeight" label="装箱货重"  min-width="120"></el-table-column>
                <el-table-column prop="isFinish" label="装箱完成"  min-width="110">
                    <template slot-scope="scope">
                        {{ scope.row.isFinish | _filterIsFinish }}
                    </template>
                </el-table-column>
                <el-table-column prop="tallyClerk" label="理货人"  min-width="120"></el-table-column>
                <el-table-column prop="tallyTime" label="理货时间"  min-width="200"></el-table-column>
            </el-table>
            <el-row style="margin-top: 20px;">
                <el-col :span="12">
                    <el-form-item label="结算方式：" prop="accountWay">
                        <el-select v-model="accountWay" placeholder="请选择" clearable @change="handleAccountFee" :disabled="!(form.planStatus=='THREE' &&form.isCheck==false && isShowByHistory)||!isShowByLoad">
                            <el-option v-for="[key, val] in _dictSettlementType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结算单位：" prop="accountUnit">
                        <auto-search-custom @selectName="handleAccountUnit"
                                            :name="accountUnit" :isShipAgent="true" :disabled="!(form.planStatus=='THREE' &&form.isCheck==false && isShowByHistory)||!isShowByLoad"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="accountWay==='C'">
                <el-col :span="24">
                    <el-form-item label="付费金额：">
                        {{ accountFee }}元
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-if="form.planStatus=='THREE' &&form.isCheck==false && isShowByHistory" @click="reSureBefore">确认核对</el-button>
            <el-button v-if="form.attachments&&form.attachments.length>0" @click="downPic">下载装箱照片</el-button>
            <el-button v-if="form.planStatus=='THREE' && isShowFinish == true && isShowLoad == false && isShowByLoad" @click="retreatClick">退回作业</el-button>
            <el-button @click="dialogForm = false">关 闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchContainer from '@/components/autocomplete/autoSearchContainerId'
    import attachments from '@/components/file-upload'
    import { addPlanList,editPlanList,retreatOption,downPicList,Verify } from '@/api/planList/planList'
    import {getSpecialNum} from '@/api/shipPlan/shipPlan'
    import { REG_ALL_NUMBER, REG_NUMBER } from "@/utils/Reg";
    import autoSearchResource from '@/components/autocomplete/autoSearchResource'
    export default {
        name: "planListForm",
        components: {
            autoSearchEntrust, autoSearchSize, autoSearchCustom, attachments, autoSearchContainer,autoSearchResource
        },
        data() {
            return {
                isEdit: false,
                dialogForm: false,
                form: this.clearForm(),
                table: [this.clearTable()],
                isShowFinish:"",
                isShowLoad:"",
                isShowByLoad : true,
                isShowByHistory : true,
                accountWay : '',
                accountFee : '',
                accountUnit : '',
                innerVisible : false
            }
        },
        mounted() {
        },
        methods: {
            clearForm() {
                return {
                    containerId: "",
                    containerSize: "",
                    containerType: "",
                    tradeType: "",
                    sealNo: "",
                    portCode: "",
                    shipAgentName: "",
                    shipAgentId: "",
                    remark: "",
                    enchaseWay: "GZ",
                    cargoWeight: 0,
                    cargoCount: 0,
                    imOrEx: "IM",
                    attachments: [],
                }
            },
            clearTable() {
                return {
                    cargoName: "",
                    packing: "",
                    cargoCount: "",
                    cargoWeight: "",
                    isFinish: false,
                    tallyClerk: "",
                    tallyTime: ""
                }
            },
            reSureBefore(){
                this.innerVisible = true
            },
            reSure(){
                let bg = {
                    data: [{
                        id: this.form.planId
                    }],
                    accountUnit : this.accountUnit,
                    accountWay : this.accountWay,
                    money : this.accountFee == "" ? 0 : this.accountFee
                };
                Verify(bg).then(res => {
                    this.$message({ message: '核对成功!', type: 'success' })
                    this.dialogForm = false
                    this.innerVisible = false
                })
            },
            retreatClick(){
                let ids = this.form.planId
                retreatOption(ids, {}).then(res=>{
                    this.$parent.dialogForm = false
                })
            },
            handleAccountFee(){
                if (this.accountWay === 'C') {
                    let data = []
                    data.push({
                        id:this.form.planId,
                        accountUnit: this.accountUnit,
                        accountWay: this.accountWay,
                    })
                    getSpecialNum(data).then(res => {
                        this.accountFee = res.data
                    })
                }
            },
            handleAccountUnit(val) {
                this.accountUnit = val
                if (val) {
                    this.handleAccountFee()
                }
            },
            downPic(){
                let params = {
                    businessId: this.form.attachments[0].businessId,
                    businessType: this.form.attachments[0].businessType,
                    zipName: this.form.containerId
                }
                downPicList(params).then(res =>{
                    let t = 'attachments/business/download?'
                    let u = window.location.href.split('#')[0]
                    let r = ''
                    if(u.indexOf('qd')>=0){
                        r = 'http://106.14.116.182:8081/' + t
                    }else{
                        r = u + 'api/' + t
                    }
                    let l =r +'businessId=' + params.businessId + '&businessType='+params.businessType+'&zipName='+params.zipName
                    window.open(l)
                })
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$parent.loadDetailForm = false
                    this.$emit('load')
                }
            },
            count(val) {
                this.form.cargoCount = val
            },
            weight(val) {
                this.form.cargoWeight = val
            }
        },
        computed: {
            isFinish() {
                return this.table.length > 0 && this.table[this.table.length - 1].isFinish
            },
            // 总件数
            count() {
                let count = 0
                this.table.forEach(item => {
                    if (Number(item.cargoCount) >= 0) {
                        count = count + Number(item.cargoCount)
                    }
                })
                return count
            },
            // 总货重
            weight() {
                let weight = 0
                this.table.forEach(item => {
                    if (Number(item.cargoWeight) >= 0) {
                        weight = weight + Number(item.cargoWeight)
                    }
                })
                return weight
            },
        },
    }
</script>

<style scoped>
    .el-upload-list__item-delete{
        display: none;
    }
</style>
